import { deleteFileInf } from "@/utils/deleteFileInf";
import { PlusOutlined } from "@ant-design/icons";
import { Button, DatePicker, Form, Input, Spin, Upload } from "antd";
import { FieldType } from "../hooks/useBasicInfo";
import { useBasicInfo } from "../hooks/useBasicInfo";
import PermissionBtn from "@/components/PermissionBtn";

export default function BasicInfo() {
  const {
    loading,
    btnLoading,
    form,
    onFinish,
    fileList,
    uploadFileInf,
    setFileList,
  } = useBasicInfo();
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传</div>
    </button>
  );
  return (
    <Spin spinning={loading}>
      <Form
        form={form}
        name="BasicInfo"
        size="middle"
        onFinish={onFinish}
        autoComplete="off"
        layout="vertical"
      >
        <Form.Item<FieldType>
          name="manName"
          label="男生姓名"
          rules={[
            { required: true, message: "请输入!" },
            { max: 10, message: "姓名最长10个字" },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          name="womanName"
          label="女生姓名"
          rules={[
            { required: true, message: "请输入!" },
            { max: 10, message: "姓名最长10个字" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item label="男生头像">
          <Upload
            name="manAvatar"
            listType="picture-circle"
            className="avatar-uploader"
            action="#"
            fileList={fileList.manAvatar}
            customRequest={(file) => uploadFileInf("manAvatar", file.file)}
            onRemove={async () => {
              const url =
                fileList.manAvatar[0] && fileList.manAvatar[0].url
                  ? fileList.manAvatar[0].url
                  : "";
              if (url) {
                deleteFileInf(url);
              }
              setFileList({
                ...fileList,
                manAvatar: [],
              });
            }}
          >
            {fileList.manAvatar.length >= 1 ? null : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item label="女生头像">
          <Upload
            name="womanAvatar"
            listType="picture-circle"
            className="avatar-uploader"
            action="#"
            fileList={fileList.womanAvatar}
            customRequest={(file) => uploadFileInf("womanAvatar", file.file)}
            onRemove={async () => {
              const url =
                fileList.womanAvatar[0] && fileList.womanAvatar[0].url
                  ? fileList.womanAvatar[0].url
                  : "";
              if (url) {
                deleteFileInf(url);
              }
              setFileList({
                ...fileList,
                womanAvatar: [],
              });
            }}
          >
            {fileList.womanAvatar.length >= 1 ? null : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item label="爱心">
          <Upload
            name="heart"
            listType="picture-circle"
            className="avatar-uploader"
            action="#"
            fileList={fileList.heart}
            customRequest={(file) => uploadFileInf("heart", file.file)}
            onRemove={async () => {
              const url =
                fileList.heart[0] && fileList.heart[0].url
                  ? fileList.heart[0].url
                  : "";
              if (url) {
                deleteFileInf(url);
              }
              setFileList({
                ...fileList,
                heart: [],
              });
            }}
          >
            {fileList.heart.length >= 1 ? null : uploadButton}
          </Upload>
        </Form.Item>
        <Form.Item label="爱心">
          <Upload
            name="bg"
            listType="picture-circle"
            className="avatar-uploader"
            action="#"
            fileList={fileList.bg}
            customRequest={(file) => uploadFileInf("bg", file.file)}
            onRemove={async () => {
              const url =
                fileList.bg[0] && fileList.bg[0].url ? fileList.bg[0].url : "";
              if (url) {
                deleteFileInf(url);
              }
              setFileList({
                ...fileList,
                bg: [],
              });
            }}
          >
            {fileList.bg.length >= 1 ? null : uploadButton}
          </Upload>
        </Form.Item>

        <Form.Item
          name="timing"
          label="相爱日期"
          rules={[{ required: true, message: "请输入!" }]}
        >
          <DatePicker format="YYYY-MM-DD HH:mm:ss" showTime />
        </Form.Item>
        <Form.Item>
          <PermissionBtn code="love.config">
            <Button type="primary" htmlType="submit" loading={btnLoading}>
              保存
            </Button>
          </PermissionBtn>
        </Form.Item>
      </Form>
    </Spin>
  );
}
